<template>
<div ref="chart2" class="chart2" style="width: 600px;height: 400px"></div>
</template>

<script>
import * as echarts from 'echarts';//echarts5的引入方式
export default {
  components:{
    echarts
  },
  data() {
    return {}
  },
  mounted() {
this.getmain()
  },
  methods: {
    getmain() {
      //获取echarts对象
      // let myChart = this.$echarts.init(document.querySelector('chart2'));
      var myChart2 = echarts.init(this.$refs.chart2);
      // 指定图表的配置项和数据
      let option = {
        //表头
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {}, //提示
        legend: {
          //图例
          data: ["销量"] //对应series每一项中的name
        },
        xAxis: {
          //x轴显示内容
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {}, //y轴默认
        series: [
          //数据1  柱形
          {
            name: "销量",
            type: "bar", //类型  柱形
            data: [5, 20, 36, 10, 10, 20] //柱形的点
          },
          //数据2  折线
          {
            name: "折线",
            type: "line", //类型 折线
            smooth: true, //是否是弯曲的折现  弯弯曲曲
            itemStyle: {
              //折线样式
              /*设置折线颜色*/
              normal: {
                color: "#c4cddc"
              }
            },
            data: [5, 20, 36, 10, 10, 20] //折线的点
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      //定时器主要实现数据的变化echarts的重新渲染
      //删除数据第一项 在最后加一项
      // setInterval(function() {
        // var data0 = option.series[0].data;
        // option.series.map(item => {
        //   item.data.shift();
        //   item.data.push(Math.round(Math.random() * 39 + 1));
        // });
        // myChart2.setOption(option);
      // }, 1000);
      myChart2.setOption(option);
    }

  }
}
</script>

<style scoped lang="less">

</style>
